<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>BI Component - Orgnization Heirarchy</title>
    <link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css"/>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css"/>
    <link rel="Stylesheet" type="text/css" href="../../css/skin-vista/ui.dynatree.css"/>

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.cookie.js"></script>
    <script type="text/JavaScript" src="../../<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.dynatree.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            varname:"",
            value:undefined,
            height:"50%"
        };
        window.onload = function () {
            //sample registeration for an event
            //register listener function for an event
        }
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
            //load the tree
            user_org();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
        };
    </script>

    <script type="text/javascript">
        var selectedVariable = [];
        // $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default
        function user_org() {
            $(".hierarchy").dynatree({
                initAjax:{
                    //   <%--                    url: "org_hier_full2.xml"--%>
                    url:"../../model/Org_hier_list.json"
                },
                onSelect:function (select, node) {
                    if (node.data.isFolder == "true") {
                        getSelectedValues();
                    }
                    else {
                    }
                },
                minExpandLevel:1,
                clickFolderMode:1,
                checkbox:true,
                selectMode:3,
                fx:{ height:"toggle", duration:500 },
                onPostInit:function (reloading, error) {
                    if (properties.value)
                        $(".hierarchy").dynatree("getTree").selectKey(properties.value);
                },
                onExpand :function(select, node){
                    //Config height for Hierarchy - faisal 11/03/2014
                    var orgHt = $('.org-menu').height();
                    var leftCol =  window.parent.$('.left-col iframe');

                    $('ul.dynatree-container li:first').css('overflow', 'auto').height(orgHt - 42);
                    $(leftCol).find('ul.dynatree-container li:first').height('100%');
                }
            });
        }
        $(document).ready(function () {

            user_org();

            $('a.searchBtn').click(function () {
                var tree = $('.hierarchy').dynatree("getTree");
                var match = null;

                var nodeKey = $('.search-box').val();
                tree.visit(function (node) {
                    node.data.addClass = '';
                    if (node.data.title.toLowerCase().indexOf(nodeKey) > -1) {
                        node.makeVisible();
                        node.data.addClass = 'highlight';
                        // match.push(node);
                        match = node;
                    }
                });

                if (match === null) {
                    //  alert("Not Found");
                    BOI.BOILib.Util.log('Not Found', true);
                }
                else {
                    match.activate();
                    match.select();
                    var matchLi = match.li;
                    $('.dynatree-container').animate({
                        scrollTop:$(matchLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
                    }, 'slow');
                }
            });
        });
        function resetSelections() {
            $('.hierarchy').dynatree("getRoot").visit(function (node) {
                node.select(false);
            });
            properties.value = "";
            properties.variable.value = "";
            BOI.context.variables[this.name].value = "";
            selectedVariable = [];
        }
        function getSelectedValues() {
            var selKeys = $('.hierarchy').dynatree("getSelectedNodes");
            for (var i in selKeys) {
                selectedVariable.push(selKeys[i].data.key);
                properties.value = selectedVariable;
            }
            if (selKeys == "") {
                BOI.context.variables[this.name].value = "";
                properties.value = "";
                properties.variable.value = "";
            }
            //BOI.Events.raiseEvent(BOI.Events.varchange, [properties.varname, selectedVariable]);
        }
    </script>
    <style>
        body {
            overflow: hidden; background: none;
        }
    </style>
</head>
<body>
<div class="org-menu">
    <div class="org-search">
        <p><label>Org Code:</label>
            <input class="search-box" type="text" name="searchKey"/>
            <a class="searchBtn">Search</a>
        </p>
    </div>
    <div class="hierarchy">
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>